<template>
<div>
  <div class="mask" >

  </div>
  <div class="dialog" v-if="isShow" @click="handleClose">
    <div class="box">
      <div @click="handleClose" class="cha">
        <img src="@/assets/login/chacha.png" alt="" class="closeimg">
      </div>
      <img :src="img" alt="" class="chooseImg">
    </div>

  </div>
</div>


</template>
<script>

export default {
  props:{
    img:{
      type:String
    },
  },
  data(){
    return{
      isShow:true
    }
  },
  methods: {
    handleClose(e){
      if(!(e.target.nodeName=='IMG' && e.target.className=='chooseImg')){
        this.isShow=false
        this.$emit('closeImg',false)
      }

    }
  },
}
</script>
<style lang="scss" scoped>
.dialog{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mask{
  background: #c2c5ca;
  z-index: 1001;
   position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
   opacity: 0.5;
}
.box{
  position: relative;

}
.cha{
  position: absolute;
  right: 0;
  top:0;
  cursor: pointer;
}
</style>
